import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
} from 'react-native';
import Common from '../common/constants';
import {Carousel, Grid, SearchBar} from 'antd-mobile';
import { fetchBanner } from '../actions/bannerAction';
import { fetchCity } from '../actions/userAction';

import SearchHeader from '../components/SearchHeader';
import CardListContainer from '../containers/CardListContainer';
import SearchContainer from '../containers/SearchContainer';
import CityContainer from '../containers/CityContainer';
import BuyContainer from '../containers/BuyContainer';
import ViewTicketListContainer from '../containers/ViewTicketListContainer';

import Util from '../common/utils';

const navdata = [
    {icon: 'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',text: '居游卡'},
    {icon: 'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png', text: '购买详情',},
    {icon: 'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png', text: '门票列表',},
    {icon: 'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',text: 'aa',},
    {icon: 'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png', text: 'aa',},
    // {icon: 'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png', text: 'aa',},
    // {icon: 'https://os.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png', text: 'aa',},
    // {icon: 'https://os.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',text: 'aa',},
    // {icon: 'https://os.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png', text: 'aa',},
    // {icon: 'https://os.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png', text: 'aa',}
   ];

export default class Index extends React.Component{

    constructor(props) {
        super(props);
    }

    // componentDidMount() {
    //     InteractionManager.runAfterInteractions(() => {
    //         const {dispatch} = this.props;
    //         dispatch(fetchBanner());
    //         dispatch(fetchCity());
            
    //         //dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
    //     });
    // }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(fetchBanner());
        dispatch(fetchCity());
    }


    _search(){
        this.props.navigator.push({
            component: SearchContainer,
            leftButtonTitle : '< 首页',
            'navigationBarHidden' : false,
            'title' : '搜索',
            onLeftButtonPress : () => this.props.navigator.pop()
        })
    }

    _city(city) {
        this.props.navigator.push({
            component: CityContainer,
            passProps: {
                'city' : city,
            },
            'leftButtonTitle' : '< 首页',
            'navigationBarHidden' : false,
            'title' : '选择城市',
            onLeftButtonPress : () => this.props.navigator.pop()
        })
    }

    render(){
        //console.log(this.props.homepageReducer);
        let { bannerList, city } = this.props.homepageReducer;


        return (
            <View style={styles.main}>
                <SearchHeader 
                    searchAction={this._search.bind(this)}
                    cityAction={this._city.bind(this, city.city)}
                    city={city.city}
                />
                <Carousel autoplay infinite style={styles.banner}>
                    {bannerList.map((obj, i) => {
                        return (
                            <Image key={i} style={styles.bannerImage}
                                source={{uri: obj.url}}
                            />
                        );
                    })}
                </Carousel>
                <Grid data={navdata} 
                    columnNum={5} 
                    hasLine={false} 
                    //isCarousel={true} 
                    //carouselMaxRow={1}
                    // renderItem={(dataItem, index) => (
                    //     <View >
                    //       <View >
                    //         <Text>{index + 1}.{dataItem.text}</Text>
                    //       </View>
                    //       <Image source={{uri : dataItem.icon}} style={styles.nav} />
                    //     </View>
                    //   )}
                    onClick={(obj, index) => {

                        //居游卡
                        if(index == 0){
                            this.props.navigator.push({
                                component: CardListContainer,
                                passProps: {
                                    leftButtonTitle : '< 首页'
                                },
                            })
                        }

                        //购买详情
                        if(index == 1){
                            this.props.navigator.push({
                                'component': BuyContainer,
                                'leftButtonTitle' : '< 返回',
                                'navigationBarHidden' : false,
                                'title' : '购买信息',
                                'passProps': { 'mobile': '1234' },
                                'onLeftButtonPress' : () => this.props.navigator.pop()
                            })
                        }


                        //购买详情
                        if(index == 2){
                            this.props.navigator.push({
                                'component': ViewTicketListContainer,
                                'leftButtonTitle' : '< 返回',
                                'navigationBarHidden' : false,
                                'title' : '门票列表',
                                'passProps': { 'mobile': '1234' },
                                'onLeftButtonPress' : () => this.props.navigator.pop()
                            })
                        }

                    }}

                />
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 20
    },

    banner : {
        height : 200,
    },

    bannerImage: {
        height: 200,
        width: Common.window.width,
    },

    city : {
        width : 100,
    },



    // search : {
    //     width : Common.window.width - 100,
    // }

   
})